<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <link rel="icon" href="favicon.ico">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
</head>

  <body>

  <!--用户界面的头-->
  <nav class="navbar navbar-inverse navbar-fixed-top" id="header">
    <div class="container-fluid">
      <div class="navbar-header">
        <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> -->
        <span class="navbar-brand" style="font-size: 40px">[[${session.loginUser}]]</span>
      </div>
      <div class="navbar-right row">
        <span class="navbar-brand col-md-1"><span class="glyphicon glyphicon-log-out" onclick="logout()"></span></span>
      </div>
    </div>
    <script>
        function logout() {
            window.location.href="/logout";
        }
    </script>
  </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <!--用户界面的侧边-->
          <ul class="nav nav-sidebar  " id="usersidebar" >
            <!--使用th:class并且根据传来的url参数来动态的active,使其高亮-->
            <li style="margin-top: 10px;"th:class="${url=='main' ? 'nav-link active' : 'nav-link'}" ><a th:href="@{/page}" >图书列表</a></li>
            <!--<li th:class="${url=='search' ? 'nav-link active' : 'nav-link'}"><a th:href="@{/search}" >搜索图书</a> </li>-->
            <!--<li th:class="${url=='userupdate' ? 'nav-link active' : 'nav-link'}" ><a th:href="@{/userup}">个人中心</a></li>-->
            <!--<li th:class="${url=='usercar' ? 'nav-link active' : 'nav-link'}"><a th:href="@{/usercar}">购物车</a></li>-->
            <li  ><a href="#">搜索图书</a> </li>
            <li  ><a href="#">个人中心</a></li>
            <li  ><a href="#">购物车</a></li>
            <li><a th:href="@{/logout}">退出系统</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h2 class="sub-header">图书列表</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>书名</th>
                  <th>价格</th>
                  <th>库存</th>
                  <th>作者</th>
                  <th>购买数量</th>
                  <th>操作</th>
              </thead>
              <tbody>
                  <tr th:each="book,stat:${page.booklist}">
                    <td th:text="${book.bName}"></td>
                    <td th:text="${book.money}"></td>
                    <td th:text="${book.num}"></td>
                    <td th:text="${book.author}"></td>
                    <td><input type="number" class="bookNumber" value="1" min="1" ></td>
                    <td>
                      <!--<a class="btn btn-default" th:onclick="'javascript:addCartFun('+${book.bookId}+','+${stat.index}+');'">加入购物车</a>-->
                    </td>
                  </tr>
              </tbody>
            </table>
            <ul class="pagination" th:if="${page.pageNum>0}">
              <li><a href="/page?pageNum=1">首页</a></li>
              <!--当前页数为第一页-->
              <th:block th:if="${page.pageNum == 1} "th:each="num,stat:${#numbers.sequence(page.start,page.end)}">
                <li th:if="${page.pageNum == num}"><span  style="color: deeppink" th:text="${num}"></span></li>
                <li th:if="${page.pageNum != num}"><a th:href="@{'/page?pageNum='+${num}}" th:text="${num}"></a></li>
              </th:block>
              <!--中间页-->
              <th:block th:if="${page.pageNum >1 && page.pageNum<page.totalPage}" >
                <li><a th:href="@{'/page?pageNum='+${(page.pageNum)-1}}">上一页</a></li>
                <th:block th:each="num,stat:${#numbers.sequence(page.start,page.end)}">
                  <li th:if="${page.pageNum == num}"><span  style="color: deeppink" th:text="${num}"></span></li>
                  <li th:if="${page.pageNum != num}"><a th:href="@{'/page?pageNum='+${num}}" th:text="${num}"></a></li>
                </th:block>
                <li><a th:href="@{'/page?pageNum='+${(page.pageNum)+1}}">下一页</a></li>
              </th:block>
              <!--当前页数为最后一页-->
              <th:block th:if="${page.pageNum == page.totalPage}">
                <li><a th:href="@{'/page?pageNum='+${(page.pageNum)-1}}">上一页</a></li>
                <th:block th:each="num,stat:${#numbers.sequence(page.start,page.end)}">
                  <li th:if="${page.pageNum == num}"><span  style="color: deeppink" th:text="${num}"></span></li>
                  <li th:if="${page.pageNum != num}"><a th:href="@{'/page?pageNum='+${num}}" th:text="${num}"></a></li>
                </th:block>
                <li><a th:href="@{'/page?pageNum='+${(page.pageNum)+1}}">下一页</a></li>
              </th:block>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
        function addCartFun(bookId,ind) {
            var number = document.getElementsByClassName("bookNumber");
            var num = number[ind].value;
            var ajax;
            if (window.XMLHttpRequest){
                ajax = new XMLHttpRequest();
            } else if (window.ActiveXObject){
                ajax = new ActiveXObject("Msxml2.XMLHTTP");
            }
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4){
                    if (ajax.status == 200){

                    }
                }
            }
            ajax.open("post","user",true);
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            ajax.send("bookId=" + bookId + "&number=" + num+"&pageNum="+[[${page.pageNum}]]);

        }
    </script>
  </body>

<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/asserts/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/asserts/js/popper.min.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/asserts/js/bootstrap.min.js}"></script>

<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{/asserts/js/Chart.min.js}"></script>
</html>
